<template>
	<view class="content">
		<view class="shop_detail"><image src="https://img0.baidu.com/it/u=1722351178,3467597391&fm=253&fmt=auto&app=138&f=JPEG?w=1265&h=500" /></view>
		<view class="recharge">
			<view class="left"></view>
			<view class="center123">权益说明</view>
			<view class="right"></view>
		</view>
		<view class="recharge_item">
			<view class="left"><image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/POS_2.png" /></view>
			<view class="right">
				<view class="top">
					新用户激活奖588元
				</view>
			</view>
		</view>
		<view class="recharge_item">
			<view class="left"><image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/POS_2.png" /></view>
			<view class="right">
				<view class="top">
					刷一万奖60元
				</view>
			</view>
		</view>
		<view class="recharge_item">
			<view class="left"><image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/POS.png" /></view>
			<view class="right">
				<view class="top">
					刷一笔奖3元
				</view>
			</view>
		</view>
		<view class="recharge_item">
			<view class="left"><image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E4%B8%BB%E9%A1%B5-%E7%A7%BB%E5%8A%A8pos.svg.png" /></view>
			<view class="right">
				<view class="top">
					手续费可低至200元
				</view>
			</view>
		</view>
		<view class="melody">
			<view class="left" @click="toTurntable()">
				暂时不需要
			</view>
			<view class="right" @click="toAddUserInfo()">
				申领设备
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		toTurntable(){
			uni.navigateTo({
				url:'/pages/main/pointWheel'
			})
		},
		toAddUserInfo(){
			uni.navigateTo({
				url:'../add_user_info/add_user_info'
			})
		}
	}
};
</script>
<style>
page {
	background-color: #f7f7f7;
	background-size: 100%;
}
</style>
<style lang="scss" scoped>
.content {
	text-align: center;
	align-items: center;
	padding-bottom: 120rpx;
	.shop_detail {
		height: 250rpx;
		border-radius: 16rpx;
		margin: 20rpx 30rpx auto 30rpx;
		image {
			width: 100%;
			height: 250rpx;
			border-radius: 16rpx;
		}
	}
	.recharge {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		margin: 10rpx 100rpx auto 100rpx;
		border-bottom: 1rpx dotted #bababa;
		
		.left {
			height: 4rpx;
			width: 40%;
			background-color: #b03e3e;
			margin-top: 47rpx;
		}
		.center123 {
			font-weight: bold;
			width: 30%;
			color: #b03e3e;
			line-height: 100rpx;
		}
		.right {
			height: 4rpx;
			width: 40%;
			background-color: #b03e3e;
			margin-top: 47rpx;
		}
	}
	.melody{
		height: 80rpx;
		justify-content: space-between;
		margin: auto 70rpx;
		display: flex;
		position: fixed;
		bottom: 20rpx;
		right: 0;
		left: 0;
		.left{
			height: 80rpx;
			width: 250rpx;
			background-color: #c4342b;
			color: #fff;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			
		}
		.right{
			height: 80rpx;
			width: 250rpx;
			background-color: #c4342b;
			color: #000;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
		}
	}
	.recharge_item {
		height: 160rpx;
		display: flex;
		margin: auto 30rpx auto 30rpx;
		border-bottom: 1rpx dotted #c4342b;

		.left{
			height: 160rpx;
			width: 30%;
			text-align: left;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;
			}
		}
		.right {
		
			height: 160rpx;
			width: 70%;
			text-align: left;
			text-overflow: ellipsis;
			overflow: hidden;
			flex-wrap: wrap;
			white-space: 2;
			.top{
				height: 160rpx;
				line-height: 160rpx;
				font-size: 28rpx;
				font-weight: bold;
				font-family: Arial, Helvetica, sans-serif;
				color: #c4342b;
			}
		}
	}
}
</style>
